<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-24 22:00:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-29 00:16:34
 * @FilePath: /chat-ai-plus/src/components/Sider/Sider.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div className="sider-container ">
    <view class="p_default">
      <view class="align-items_center gap_xs">
        <u-image
          mode="heightFix"
          height="30px"
          width="50px"
          src="/static/images/logo@2x.png"
        ></u-image>
        <view class="weight_bolder">ChatSmart</view>
      </view>
      <Models className="mt_default "></Models>
    </view>
    <view class="divider"></view>
    <view class="tool-set-wrap p_default">

    </view>

    <view class="px_sm">
      <view class="list">
        <view class="list-item" @click="open">
          <u-icon name="shezhi" custom-prefix="icon" size="20"></u-icon>
          <view>{{$t('instruct.heading')}}</view>
        </view>
      </view>
    </view>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue';
import Models from '@/components/Models/index';
import ToolSet from '@/components/ToolSet/index';
import { navigateTo } from '@/utils/uni';
import popup from '@/components/PopupInstruct/index';
export default defineComponent({
  name: 'Sider',
  components: {
    Models,
    ToolSet,
  },

  setup() {
    const instance = getCurrentInstance();
    const open = () => {
      popup.open(instance);
    };
    return {
      navigateTo,
      open,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.sider-container {
  box-sizing: border-box;
  width: 180px;
  height: 100%;
}

.list {
  $size: map-get($spaces, sm);
  .list-item {
    display: flex;
    align-items: center;
    border-radius: $radius;
    border: solid 1px map-get($border-colors, default);
    padding: map-get($spaces, xs);
    gap: $size;
  }
  .list-item.active {
    background: map-get($theme-colors, primary);
    color: $white-color;
    border-color: map-get($theme-colors, primary);
  }
}

.tool-set-wrap {
  height: calc(100% - 320px);
  // margin: 0 -12px;
  // background: red;
}

.divider {
  border-top: solid 1px #ededed;
}
</style>
